<template>
  <!-- 主容器，支持暗黑模式 -->
  <view class="container" :class="{ dark: isDark }">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <!-- 返回按钮 -->
      <view class="nav-back" @click="goBack"><</view>
      <!-- 页面标题 -->
      <view class="nav-title">消息详情</view>
    </view>
    
    <!-- 消息内容区域 -->
    <view class="message-detail">
      <!-- 有消息内容时显示 -->
      <view v-if="message.title" class="detail-content">
        <!-- 消息标题 -->
        <view class="detail-title">{{ message.title }}</view>
        <!-- 消息正文 -->
        <view class="detail-body">{{ message.content }}</view>
      </view>
      <!-- 无消息内容时显示 -->
      <view v-else class="empty-message">加载中或暂无数据</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      message: {  // 消息数据对象
        title: '',    // 消息标题
        content: ''   // 消息内容
      },
      isDark: false   // 是否暗黑模式
    }
  },
  
  // 页面显示生命周期
  onShow() {
    // 获取全局暗黑模式设置
    const dark = getApp().globalData.darkMode;
    this.isDark = dark;
  
    // 根据暗黑模式设置界面样式
    if (dark) {
      // 暗黑模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#1e1e1e',
        borderStyle: 'black',
        color: '#999999',
        selectedColor: '#ffffff'
      });
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1e1e1e'
      });
    } else {
      // 明亮模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#ffffff',
        borderStyle: 'black',
        color: '#7A7E83',
        selectedColor: '#fb7e29'
      });
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#F8F8F8'
      });
    }
  },
  
  // 页面加载生命周期
  onLoad(options) {
    // 从路由参数获取email和level
    const { email, level } = options
    
    // 参数验证
    if (email && level) {
      // 获取消息详情
      this.fetchMessageDetail(email, level)
    } else {
      // 参数缺失提示
      uni.showToast({ title: '参数缺失', icon: 'none' })
    }
  },
  
  // 方法定义
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.redirectTo({
        url: '/pages/News/News'
      })
    },
    
    /**
     * 获取消息详情
     * @param {string} email - 用户邮箱
     * @param {string} level - 消息级别
     */
    fetchMessageDetail(email, level) {
      // 调用API获取消息列表
      uni.request({
        url: `http://localhost:8080/newList/${email}`,
        method: 'GET',
        success: (res) => {
          console.log('返回的消息列表:', res)
          
          // 响应成功处理
          if (res.statusCode === 200 && res.data.code === 1) {
            const list = res.data.data

            // 根据carId和level查找目标消息
            // 注意: 当前carId固定为'1'，如需动态获取可修改参数
            const detail = list.find(item =>
              String(item.carId) === '1' && String(item.level) === String(level)
            )

            if (detail) {
              // 找到消息，更新数据
              this.message = detail
            } else {
              // 未找到对应消息提示
              uni.showToast({ title: '未找到对应消息', icon: 'none' })
            }
          } else {
            // 加载失败提示
            uni.showToast({ title: '加载失败', icon: 'none' })
          }
        },
        fail: () => {
          // 请求失败提示
          uni.showToast({ title: '请求失败', icon: 'none' })
        }
      })
    }
  }
}
</script>
<style lang="scss">
// 导入全局样式
@import "@/common/page-style.scss";

/* 消息详情区域样式 */
.message-detail {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 30rpx;
}

/* 消息内容容器样式 */
.detail-content {
  background: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 消息标题样式 */
.detail-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

/* 消息正文样式 */
.detail-body {
  font-size: 30rpx;
  line-height: 1.6;
  color: #444;
}

/* 空消息提示样式 */
.empty-message {
  text-align: center;
  color: #888;
  font-size: 28rpx;
  padding: 100rpx 20rpx;
}

/* 暗黑模式样式覆盖 */
.container.dark {
  background-color: #121212;
  color: #e0e0e0;
}

.container.dark .message-detail {
  background-color: #1e1e1e;
  color: #ddd;
}

.container.dark .detail-content {
  background-color: #2a2a2a;
  box-shadow: none;
}

.container.dark .detail-title,
.container.dark .detail-body {
  color: #eee;
}

.container.dark .empty-message {
  color: #999;
}

/* 导航栏样式 */
.nav-bar {
  background: #ffffff;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 返回按钮样式 */
.nav-bar .nav-back {
  margin-right: 20rpx;
  font-size: 44rpx;
  cursor: pointer;
  color: #333;
}

/* 导航标题样式 */
.nav-bar .nav-title {
  flex: 1;
  text-align: center;
  color: #333;
}

/* 暗黑模式导航栏样式 */
.container.dark .nav-bar {
  background: #1e1e1e;
  box-shadow: none;
  color: #eee;
}

.container.dark .nav-bar .nav-back {
  color: #eee;
}

.container.dark .nav-bar .nav-title {
  color: #eee;
}
</style>